<template>
  <div id="d-scroll" v-loading="isLoading" class="infinite-list-wrapper updateNotify ">
    <ul
      v-infinite-scroll="load"
      class="list"
      :infinite-scroll-disabled="disabled"
      infinite-scroll-immediate
    >
      <li v-for="(item, index) in List" :key="index">
        <a :href="item.href" target="_blank" rel="noopenner noreferrer">
          <p>{{ item.title }}</p>
          <span>{{ item.remarks }}</span>
        </a>
      </li>
    </ul>
    <p> {{ loadTit }}</p>
  </div>
</template>

<script>
import { getUpdateNotify } from '@/api/login'
export default {
  name: 'UpdateNotify',
  data() {
    return {
      isLoading: true,
      pageLast: 0,
      loadTit: '加载中...',
      List: [],
      // 查询参数
      queryParams: {
        pageNo: 1
      }
    }
  },
  computed: {
    disabled() {
      if (this.queryParams.pageNo >= this.pageLast) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    load() {
      this.queryParams.pageNo++
      this.getList(true)
    },
    getList(flag) {
      this.loadTit = '加载中...'
      getUpdateNotify(this.queryParams).then(response => {
        this.isLoading = false
        const rows = response.data.list
        this.pageLast = response.data.pageLast
        if (flag) {
          this.List = this.List.concat(rows)
          // 多次加载数据
          if (rows.length === 0 || rows === [] || this.queryParams.pageNo >= response.data.pageLast) {
            this.loadTit = '没有更多了'
          }
        } else {
          // 第一次加载
          this.List = rows
        }
      })
    }
  }
}
</script>
